<template>
  <div>
    <div class="had-log">
      <img :src="log" alt="" />
    </div>
    <div class="getLog">
      <el-form
        :model="loginForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <input
            placeholder="账号"
            class="el-input__inner"
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="password">
          <input
            placeholder="密码"
            class="el-input__inner"
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="submitLoginForm(loginForm)" class="denglu"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
      <div class="foot">
        <router-link tag="div" to="/register" class="register"
          >没有账号，免费注册</router-link
        >
        <router-link tag="div" class="forget" to="forget">忘记密码</router-link>
      </div>
    </div>
  </div>
</template>

<script>
const log = require("../../assets/log/raw_1516935429.png");
import api from "../../api";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      log: log,
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
     ...mapMutations("loginModule", ["setUser"]),
    //登录
    submitLoginForm() {
      console.log(this.loginForm.username,this.loginForm.password);
      if (
        !(this.loginForm.username === "" &&
        this.loginForm.password === "")
      ) {
        api
          .getLogin({
            username: this.loginForm.username,
            password: this.loginForm.password,
          })
          .then((res) => {
            if (res.status === 200) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.setUser({
                username:this.loginForm.username,
                token:res.data
              })
                localStorage.setItem("rttub", res.data);
               this.$router.push('/')
            }else{
              this.$message({
                message: "用户名密码错误",
                type: "error",
              });
            }
          });
      }else{
        this.$message({
                message: "用户名密码不能为空",
                type: "error",
              });
      }
    },
  },
};
</script>

<style scoped>
.had-log {
  width: 130px;
  height:74px;
  margin-top: 63px;
  margin-left:122px;
}
.el-input__inner {
  width:238px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  /*outline: medium;*/
  background: #F7F7F7;
}
.getLog {
  height: 187px;
  margin-top: 48px;
  margin-left:-23px;
}

.denglu {
    width: 242px;
    height: 43px;
    background-color:#F7F7F7 ;
}
input::-webkit-input-placeholder {
  color: #4e4e4e;
}
.foot {
  width:290px;
  height: 23px;
  font-size: 12px;
  margin: 0 auto;
  padding-left: 94px;
  display: flex;
}
.register {
  width: 109px;
}
.forget {
  width: 49px;
  margin-left:77px;
}
</style>